<template>
  <div class="strut-div">
    <div class="card-item" style="height: 1360px;">
      <p class="card-title">主要景区视频监控</p>
      <div class="card-div">
        <div class="video-top">
          <p>{{scenicSpot.entpName}}</p>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="tourist-contrast">
                <img src="../../../assets/imgs/v2/data-blue.png" />
                <div>
                  <p class="tourist-contrast-name">景区实时客流</p>
                  <p class="tourist-contrast-number lcd-font">
                    <count-to :end="scenicSpot.flow"></count-to>
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tourist-contrast">
                <img src="../../../assets/imgs/v2/data-day.png" />
                <div>
                  <p class="tourist-contrast-name">今日累计客流</p>
                  <p class="tourist-contrast-number lcd-font">
                    <count-to :end="scenicSpot.flowTotal"></count-to>
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="video-bottom">
          <button>实时监控</button>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(video, index) in videoList" :key="index">
              <div class="tourist-video-detail">
                <div class="video-cover" @click="showDialog(video)"></div>
                <video :id="video.title" class="video-js vjs-default-skin">

                </video>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <el-dialog :title="showVideo.title" :visible.sync="dialogShow" width="1000px" :modal="false"
      :before-close="handleClose">

      <div id="videoDiv">
        <video id="showV" class="video-js vjs-default-skin"></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import videojs from 'video.js';
  window.videojs = videojs;
  import 'videojs-contrib-hls'
  
  videojs.options.flash.swf = 'static/video-js.swf';

  import CountTo from '@/components/count-to'
  export default {
    components: {
      CountTo
    },
    data() {
      return {
        scenicSpotList:[],
        scenicSpot:{
          entpName: "大槐树寻根祭祖园",
          flow: 119,
          flowTotal: 850
        },
        timeout:null,
        interval:null,
        videoList:[{
          title:"根影壁",
          url:"rtmp://220.194.160.2:8090/video1/"
        },
        {
          title:"停车场",
          url:"rtmp://220.194.160.2:8090/video2/"
        }
        ,{
          title:"广济寺前",
          url:"rtmp://220.194.160.2:8090/video3/"
        },{
          title:"售票室外",
          url:"rtmp://220.194.160.2:8090/video4/"
        },{
          title:"民俗村",
          url:"rtmp://220.194.160.2:8090/video5/"
        },{
          title:"洪崖古洞",
          url:"rtmp://220.194.160.2:8090/video7/"
        },{
          title:"根雕大门东",
          url:"rtmp://220.194.160.2:8090/video8/"
        },{
          title:"新塑一代大槐树处",
          url:"rtmp://220.194.160.2:8090/video10/"
        },
        ],
        vList:[],
        showVideo:{
          title:"",
          url:"",
          v:null,
        },
        dialogShow:false,
      }
    },
    mounted() {

      this.loadScenicSpot();

      this.interval = setInterval(()=> {
        clearTimeout(this.timeout)
        this.loadScenicSpot();
      },30*60*1000);

      this.$nextTick(function(){
        this.initVideos('大槐树寻根祭祖园');
      })
    },
    methods: {
      loadScenicSpot() {
        let _entpName = ['洪洞关帝庙','洪洞姑射山乾元山','洪洞历山风景区','广胜寺','大槐树寻根祭祖园','山西洪洞红军八路军纪念馆','明代监狱']

        this.$jqPost(this.$api.getReceptionDetailByName,{
          dataSource: "04",
          objType: "02",
          sFJNM:  "00010001001400090001",
          selName:  '全部',
          iPageNum: 1,
          iPageSize: 20
        }).then(res => {
          if (res.retCode == 200 && res.retData) {
            this.scenicSpotList = res.retData.listData.filter(item => {
              return _entpName.includes(item.entpName);
            });

            var fromIndex = 0;
            for (var i = 0; i < this.scenicSpotList.length; i++) {
              this.scenicSpotList[i].flow = parseInt(this.scenicSpotList[i].flow);
              this.scenicSpotList[i].flowTotal = parseInt(this.scenicSpotList[i].flowTotal);
              if (this.scenicSpotList[i].entpName == "大槐树寻根祭祖园") {
                fromIndex = i;
              }
            }
            this.arraymove(this.scenicSpotList,fromIndex,0);
            this.switchData(0);
          }
        })
      },
      arraymove(arr, fromIndex, toIndex) {
          var element = arr[fromIndex];
          arr.splice(fromIndex, 1);
          arr.splice(toIndex, 0, element);
      },
      switchData(index){
        this.scenicSpot = this.scenicSpotList[index];
        this.timeout = setTimeout(() => {
          if (index == this.scenicSpotList.length -1) {
            index = 0;
          } else {
            index ++;
          }
          this.switchData(index);
        }, 10000);
      },
      initVideos(name) {
         for (var i = 0; i < this.videoList.length; i++) {
            let videoItem = this.videoList[i];
            let video = this.createVideo(videoItem.title, videoItem.url);
            this.vList.push(video);
         }
      },
      createVideo(id,url,w=295,h=190) {
        var video = videojs(id, {
               controls: false,
               autoplay: "muted",
               hls: {
               	withCredentials: true
               },
               preload: "auto",
               width: w,
               height: h,
               controlBar: { // 配置控制栏
                         timeDivider: false, // 时间分割线
                         durationDisplay: false, // 总时间
                         progressControl: true, // 进度条
                         customControlSpacer: false, // 未知
                         fullscreenToggle: false, // 全屏
                       },
            })
        video.src({
        	src: url,
          type: "rtmp/flv",
        })
        video.play();
        return video;
      },
      showDialog(video){
        this.showVideo.title = video.title;

        this.dialogShow = true;

        this.$nextTick(function(){
          document.getElementById('videoDiv').innerHTML = '<video id="showV" class="video-js vjs-default-skin"></video>';
          this.showVideo.v = this.createVideo('showV', video.url, 960,540);
        })

        this.showVideo.url = video.url;
      },
      handleClose(){
        console.log(this.showVideo.v);
        this.showVideo.v.dispose();
        this.dialogShow = false;
        // this.showVideo.v.parse();
      }
    },
    beforeDestroy() {
      clearInterval(this.interval);
      this.vList.map(v => {
        v.dispose();
      });
      if (this.showVideo.v) {
        this.showVideo.v.dispose();
      }
    }
  }
</script>

<style scoped lang="scss" type="text/scss">

  .video-top {
    >p {
      text-align: center;
      margin-top: 30px;
      font-size: 26px;
      color: #6BEEFF;
    }
    margin-bottom: 40px;
  }

  .tourist-contrast {
    height: 90px;
    margin-top:35px;
    >img {
      width: 90px;
      height: 90px;
      float: left;
      margin-left: 30px;
    }
    >div {
      margin-left: 130px;
    }
    .tourist-contrast-name {
      font-size: 20px;
      color: #6BEEFF;
      line-height: 35px;
    }
    .tourist-contrast-number {
      font-size: 40px;
      color: #FFFFFF;
      line-height: 55px;
    }
  }

  .video-bottom {
    text-align: center;
    >button {
      width:130px;
      height:36px;
      margin-top: 20px;
      margin-bottom: 10px;
      background:linear-gradient(90deg,rgba(108,67,247,1),rgba(180,158,255,1));
      opacity:0.9;
      border-radius:5px;
      border: 0;
      font-size: 20px;
      color: #FFF;
    }

  }

  .tourist-video-detail {
    height: 220px;
    margin-top: 25px;
    position: relative;
    >video {
      width: 100%;
      height: 100%;
    }
    > .video-cover {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }
  }


</style>
